<template>
  <view class="page job-list" :style="{backgroundImage: `url(${staticHost + '/vide_drawal_bg.png'})`}">
    <uni-navbar
      :border="false"
      :fixed="true"
      :height="barHeight"
      :rightWidth="60"
      :leftWidth="60"
      titleStyle="color:#fff;fontSize:18px;"
      bgColor="transparent"
      :placeholder="false"
      :autoBack="true"
    >
      <view slot="left">
        <image
          v-if="!isMpAlipay && !isMpBaidu && !isMpToutiao"
          src="../../static/images/back_black2.png"
          class="back-icon"
          style="margin-left: -10rpx"
        ></image>
      </view>
      <view :class="['nav-top', isH5 ? 'is-h5':'']">
        <view v-for="(label, index) in tabOptions" 
         :key="index" 
          :class="['nav-lab', curTab == index ? 'active':'']" 
          @click="tabClick(index)"
        >
          {{label}}
        </view>
        
      </view>
    </uni-navbar>

    <scroll-view
      class="page-scroll-vi"
      :style="{ paddingTop: headHt }"
      :scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshTrigged"
      :refresher-threshold="100"
      refresher-background="transparent"
      @refresherrefresh="onPulling"
      @scrolltolower="pageScrollBottomEv"
    >

      

      <view class="con-list">
        <block v-if="jobList.length">
          <view v-for="item in jobList" :key="item.id" class="order-list-item flex justify-between">
            <view class="order-item-msg">
              <view class="flex items-center justify-between overflow-hidden font-b">
                <view class="flex items-center overflow-hidden flex-1">
                  <text class="nowrap font16">{{ item.remarker }}</text>
                </view>
                <text :class="['gold-num font-semibold', item.flag != 1 ? 'nor-num' : '']">
                  {{ item.flag == 1 ? '+' : item.flag == 0 ? '-' : '' }} {{ item.amount }} {{ item.accoutType == 2 ? '元' : '金币'}}
                </text>
              </view>

              <view class="row-company">
                <view class="left-info">
                  {{ item.applyTime }}
                </view>
              </view>
            </view>
          </view>
          <view class="load-more">
            <u-loadmore :status="status" />
          </view>
        </block>
        <block v-if="!hasMoreData && !jobList.length">
          <view class="no-data">
            <view>{{ noDataTxt }}</view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
</template>
  
  <script>
import { MingxiList } from '@/pages/welfare/api/index';
import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo';
import { isH5, isMpAlipay, isMpBaidu, isMpToutiao } from '@/utils/platform';
import { dateFormat } from '@/utils/util';

import { staticHost } from '@/setting';

let lastSubtime = 0;

export default {
  mixins: [statusBarInfo],
  data() {
    return {
      staticHost,
      isH5,
      isMpAlipay,
      isMpBaidu,
      isMpToutiao,
      jobList: [],
      detailId: '',
      hasMoreData: true,
      curTab: 0,
      tabOptions: ['金币', '余额', '提现'],

      isRefreshTrigged: false,
      status: 'loadmore',
      noDataTxt: '这里空空如也，啥都没有哦~',
    };
  },
  async onLoad(options) {
    this.refreshApplies();
  },
  methods: {
    tabClick(index) {
      console.log('tabclick--');
      this.curTab = index;
      this.refreshApplies();
    },
    onPulling() {
      this.isRefreshTrigged = true;
      this.refreshApplies();
    },
    pageScrollBottomEv(e) {
      this.loadMore();
    },
    refreshApplies() {
      // 刷新页面数据
      lastSubtime = 0;
      this.fetchListData()
        .then((data) => {
          uni.hideLoading();
          var jobList = [];

          this.isRefreshTrigged = false;
          if (data && data.length) {
            jobList = data || [];
            jobList.forEach(per => {
              if (per.accoutType == 2) {
                per.amount = (per.amount / 100).toFixed(2)
              }
            })

            var hasMoreData = true;
            hasMoreData = false;
            this.setData({
              status: hasMoreData ? 'loadmore' : 'nomore',
              hasMoreData,
              jobList,
            });
          } else {
            this.setData({
              status: 'nomore',
              hasMoreData: false,
              jobList,
            });
          }
        })
        .catch((e) => {
          uni.hideLoading();
          this.isRefreshTrigged = false;
          uni.stopPullDownRefresh();
        })
        .finally((e) => {
          this.isRefreshTrigged = false;
          uni.hideLoading();
          uni.stopPullDownRefresh();
        });
    },
    loadMore() {
      if (!this.hasMoreData) {
        return;
      }
      this.setData({
        status: 'loading',
      });

      let last = this.jobList[this.jobList.length - 1];
      if (last) {
        lastSubtime = last.subTime
      } else {
        lastSubtime = 0;
      }
      this.fetchListData().then((data) => {
        console.log('x333');
        if (data.records.length) {
          var jobList = this.jobList;
          data.records.forEach((per) => {
            if (per.accoutType == 2) {
              per.amount = (per.amount / 100).toFixed(2)
            }
            jobList.push(per);
          });
          var hasMoreData = true;
          this.setData({
            status: hasMoreData ? 'loadmore' : 'nomore',
            hasMoreData,
            jobList,
          });
        } else {
          this.setData({
            isLoadMore: false,
            status: 'nomore',
          });
        }
      });
    },
    // 获取job列表
    fetchListData() {
      return new Promise((resolve, reject) => {
        let params = {};
        if (lastSubtime) {
          params.lastSubtime = lastSubtime;
        }
        if (this.curTab == 0) {
          params.accoutType = 1
        } else if (this.curTab == 1) {
          params.accoutType = 2
        } else {
          params.txType = 1
        }
        MingxiList(params).then((res) => {
          if (res.code == 200 && res.data) {
            let arr = res.data || [];
            arr.forEach((per) => {
              per.applyTime = dateFormat('YYYY-mm-dd HH:MM', new Date(per.subTime));
            });
            this.pages = res.data.pages || 1;
            resolve(res.data);
          } else {
            reject(res);
          }
        });
      });
    },
  },
};
</script>
<style lang="scss">
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding-right: 30%;
  &.is-h5 {
    padding-right: 0;
  }
  .nav-lab {
    font-size: 34rpx;

    &.active {
      font-weight: bold;
      color: #FF282D;
    }
  }
}
.job-list {
  position: relative;
  width: 100%;
  height: 100%;

  background: linear-gradient(180deg, #f50, rgba(255, 68, 0, 0));
  background-size: contain;
  background-repeat: no-repeat;

  .overflow-hidden {
    overflow: hidden;
  }
  .nowrap {
    flex-wrap: nowrap;
  }

  .page-scroll-vi {
    position: relative;
    width: 100%;
    padding: 0 32rpx 40rpx;
    overflow-y: auto;
    height: 100vh;
  }

  .con-list {
    background: #fff;
    border-radius: 32rpx;

    .order-list-item {
      padding: 32rpx 0;
      margin: 0 32rpx;
      border-bottom: 1px solid #eaebef;

      .order-item-msg {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
      }

      .gold-num {
        color: #f96a35;

        &.nor-num {
          color: $font_color;
        }
      }
      .row-company {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12rpx;

        .left-info {
          color: $grey_color;
        }
      }
    }

    .load-more {
      margin-top: 60rpx;
      padding-bottom: 80rpx;
    }

    .no-data {
      text-align: center;
      height: 100%;
      width: 100%;
      background-color: #fff;
      color: $grey_color;
      font-size: 26rpx;
    }
    .no-data image {
      width: 388rpx;
      margin-top: 125rpx;
      margin-bottom: 60rpx;
    }
  }
}
</style>
  